<template>
	<div class="category-tab2 swiper">
		<div class="tab-main">
			<strong><img :src="tabs2List[0].imgURL"/></strong>
			<p>
				<span>{{tabs2List[0].title}}————{{tabs2List[0].msg}}</span>
				<span>￥{{tabs2List[0].price}}</span>
			</p>
		</div>
		<div class="tab-two swiper">
			<ol class="swiper-wrapper">
				<template  v-for="item in tabs2List" >
					<li class="swiper-slide" v-if="item.id > 1" :key='item.id'>
						<router-link to="/">
							<img :src='item.imgURL' />
							<p class="tab-p">{{item.city}}</p>
							<aside>
								<p>{{item.title}}</p>
								<p>{{item.msg}}</p>
								<p>￥{{item.price}}</p>
							</aside>
						</router-link>
					</li>
				</template>
			</ol>
		</div>
	</div>
</template>

<script>
	import{ onMounted } from "vue";
	//2.引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	
	export default{
		name : 'CategoryTab2',
		data(){
			return{
				tabs2List : [
					{id:1,imgURL:require("@/assets/img/tab2-4.webp"),title:'长隆野生动物世界',msg:'《爸爸去哪儿》拍摄地',city:'广州出发',price:286},
					{id:2,imgURL:require("@/assets/img/tab2-1.jpg"),title:'帽子峰旅游景区',msg:'有“粤北九寨沟”之美誉',city:'广州出发',price:47.6},
					{id:3,imgURL:require("@/assets/img/tab2-2.jpg"),title:'长隆欢乐世界',msg:'《奔跑吧兄弟》拍摄地',city:'广州出发',price:223},
					{id:4,imgURL:require("@/assets/img/tab2-3.jpg"),title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
					{id:5,imgURL:require("@/assets/img/tab1-1.jpg"),title:'帽子峰旅游景区',msg:'有“粤北九寨沟”之美誉',city:'广州出发',price:47.6},
					{id:6,imgURL:require("@/assets/img/tab1-2.jpg"),title:'长隆欢乐世界',msg:'《奔跑吧兄弟》拍摄地',city:'广州出发',price:223},
					{id:7,imgURL:require("@/assets/img/tab1-3.jpg"),title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
				]
			}
		},
		setup(){
			onMounted( ()=>{
				new Swiper('.tab-two' ,{
					slidesPerView:3,
				})
			})
		}
	}
</script>

<style scoped>
.category-tab2{
	width: 100%;
	margin-top: 0.3rem;
	height: 8rem;
}
.tab-main img{
	width: 100%;
	height: 4rem;
	border-radius: 0.2rem 0.2rem 0 0;
}
.tab-main p{
	width: 100%;
	color: white;
	position: relative;
	font-size: 0.3rem;
	line-height: 0.8rem;
	bottom: 0.8rem;
	background-color: rgba(0,0,0,0.6);
	text-indent: 0.5em;
}
.tab-main p span:last-child{
	float: right;
	color: #FFA500;
	margin-right: 0.2rem;
}
.tab-two{
	position: relative;
	bottom: 0.5rem;
}
.tab-two li{
	width: 32%;
}
.tab-two li .tab-p{
	width: 2rem;
	left: 0.1rem;
	bottom: 2.1rem;
	position: relative;
	color: white;
	line-height: 0.6rem;
	background-color: rgba(0,0,0,0.6);
	border-radius: 0.3rem 0 0.3rem 0;
}
.tab-two li img{
	width:2.8rem;
	height: 2rem;
	border-radius: 0.3rem;
}
.tab-two li aside{
	position: relative;
	bottom: 0.5rem;
}
.tab-two li aside p{
	margin-top: 0.1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tab-two li aside p:nth-child(1){
	font-weight: bold;
	font-size: 0.35rem;
}
.tab-two li aside p:nth-child(2){
	color: #778899;
}
.tab-two li aside p:last-child{
	color: #FFA500;
	font-size: 0.3rem;
	font-weight: bold;
}
</style>